<template>
  <div class="page">
    <div class="page-bg">
      <div class="page5">
        <div class="page-title">
          质效评估
        </div>
        <div class="page-content">
          <div class="echarts">
            <!-- <div class="legend">排名</div> -->
            <div id="echarts05"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let zoomstart = 0,
  zoomend = 100;
import { echartsConfig } from "@/common/echartsConfig.js";
import requst from "@/api/api";

export default {
  name: "page5",
  components: {},
  data() {
    return {
      chartData: {},
      timer: null,
    };
  },
  async mounted() {
    const {
      data: { data },
    } = await requst.get("/api/1/page/5", {});
    this.chartData = data;
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      const xAxisData = [];
      const yAxisData_1 = [];
      const yAxisData_2 = [];
      const yAxisData_3 = [];
      const yAxisData_4 = [];

      // | companyId   | 供热单位ID   |      |
      // | companyName | 供热单位名称 |      |
      // | total       | 当年工单总量 |      |
      // | yoyTotal    | 同比工单总量 |      |
      // | rank        | 当年排名     |      |
      // | yoyRank     | 同比排名     |      |

      this.chartData.forEach((ele, i) => {
        xAxisData.push(ele.companyName);
        yAxisData_1.push(+ele.total);
        yAxisData_2.push(+ele.yoyTotal);
        yAxisData_3.push(+ele.rank);
        yAxisData_4.push(+ele.yoyRank);
      });
      // const xAxisData = this.chartData.COMPANYNAME;
      // const PM = this.chartData.PM;
      // const TB = this.chartData.TB;
      // const TOTAL = this.chartData.TOTAL;

      // const yAxisData_3 = TOTAL.map((e) => (e === Math.max.apply(null, TOTAL) ? "" : e));
      // const yAxisData_4 = TOTAL.map((e) => (e === Math.min.apply(null, TOTAL) ? e : ""));

      let param = {
        xAxisData,
        yAxisData_1,
        yAxisData_2,
        yAxisData_3,
        yAxisData_4,
      };

      console.log("param5 :>> ", param);

      this.echarts01(param);
      this.timer = setInterval(() => {
        this.echarts01(param);
      }, 2000);
    },
    echarts01(echart) {
      let that = this;
      let emptyColor = "#3559A4";
      let myChart = that.$echarts.init(document.getElementById("echarts05"));
      let option = {
        legend: {
          ...echartsConfig.legend,
          data: ["工单量", "同比", "排名"],
          right: "8%",
          top: 40,
        },
        // title: {
        //   ...echartsConfig.title,
        //   text: "工单总量 (单）",
        // },
        grid: {
          ...echartsConfig.grid,
        },
        dataZoom: [
          {
            type: "slider",
            show: false,
            start: that.zoomStart(),
            end: that.zoomEnd(echart.xAxisData.length),
            xAxisIndex: [0],
          },
        ],
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 32,
          },
          borderRadius: 8,
          borderColor: "rgba(88, 206, 255, 0.7)",
          borderWidth: 2,
          backgroundColor: "rgba(10, 29, 88, 0.8)",
          padding: 24,
        },
        yAxis: [
          {
            ...echartsConfig.yAxis,
            splitNumber: 4,
            name: "工单总量 (单）",
            nameLocation: "center",
            nameGap: 100,
          },
        ],
        xAxis: [
          {
            ...echartsConfig.xAxis,
            data: echart.xAxisData,
            axisLabel: {
              interval: 0,
              margin: 22,
              color: "rgba(255,255,255,1)",
              fontSize: 32,
              formatter: function(data) {
                if (data.length > 5) {
                  return data.substr(0, 5) + "...";
                } else {
                  return data;
                }
              },
            },
          },
        ],
        series: [
          {
            name: "工单量",
            type: "bar",
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4394FF" },
                  { offset: 1, color: "#7EEFFF" },
                ]),
              },
            },
            label: {
              show: true,
              position: "top",
              distance: 32,
              formatter: function(params) {
                if (echart.yAxisData_3[params.dataIndex]) {
                  return "{img| " + echart.yAxisData_3[params.dataIndex] + "\r" + "}";
                }
                return "";
              },
              rich: {
                img: {
                  backgroundColor: {
                    image:
                      "",
                  },
                  color: "#fff",
                  fontSize: 36,
                  fontWeight: 500,
                  width: 64,
                  height: 76,
                  lineHight: 76,
                  align: "center",
                  verticalAlign: "top",
                },
              },
            },
            barWidth: 48,
            data: echart.yAxisData_1,
          },
          {
            name: "同比",
            type: "bar",
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FFCAFC" },
                  { offset: 1, color: "#8D50E0" },
                ]),
              },
            },
            label: {
              show: true,
              position: "top",
              distance: 32,
              formatter: function(params) {
                if (echart.yAxisData_4[params.dataIndex]) {
                  return "{img| " + echart.yAxisData_4[params.dataIndex] + "\r" + "}";
                }
                return "";
              },
              rich: {
                img: {
                  backgroundColor: {
                    image:
                      "",
                  },
                  color: "#fff",
                  fontSize: 36,
                  fontWeight: 500,
                  width: 64,
                  height: 76,
                  lineHight: 76,
                  align: "center",
                  verticalAlign: "top",
                },
              },
            },
            barWidth: 48,
            data: echart.yAxisData_2,
          },
        ],
      };
      myChart.setOption(option, true);
    },
    zoomStart() {
      if (zoomend >= 100) {
        zoomstart = 0;
      } else {
        zoomstart += 10;
      }
      return zoomstart;
    },
    zoomEnd(length) {
      var displayNum = 7;
      if (length > displayNum && zoomstart === 0) {
        zoomend = (displayNum / length) * 100;
      } else if (length > displayNum) {
        zoomend += 10;
      } else {
        zoomend = 100;
        clearInterval(this.timer);
      }
      return zoomend;
    },
  },
};
</script>
<style lang="scss" scoped>
.page5 {
  .page-content {
    .echarts {
      position: relative;
      width: 1824rem;
      height: 820rem;
      #echarts05 {
        width: 1824rem;
        height: 820rem;
      }

      .legend {
        position: absolute;
        right: 8%;
        top: 80rem;
        font-size: 32rem;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
</style>
